const autoprefixer = require('autoprefixer')
const pxtorem = require('postcss-pxtorem')
// 抽取全局通用的颜色所需要的的配置
const path = require('path')

module.exports = {
  // 样式相关
  css: {
    // 加载选项
    loaderOptions: {
      // 下面这两行也是原来配置px转rem的官方文档中的配置,这里用不到,先销毁一下
      // outputDir: 'dist', // 打包文件的出口
      // 这里设置的是打包之后的文件的根路径,也可以先不要
      // publicPath: process.env.NODE_ENV === 'production' ? '/vant-demo/' : '/',
      postcss: {
        plugins: [
          // 设置项目样式兼容,已经设置过了,就不用更改了
          autoprefixer(),
          // px转rem的规则
          pxtorem({
            // 1rem 设计图中是 1rem是37.5px
            // 设计图宽度为37.5*10 = 375
            rootValue: 37.5,
            // 输出的值是多少就是根据自己输入的px值,自动算出的了
            propList: ['*']
          })
        ]
      }
    }
  },

  pluginOptions: {
    // 直接在less文件中写好的颜色,如果使用import引入,他不会起作用的,需要自己做一个引入
    // 在这里做一个全局的配置,这样才可以使用这个功能
    // 样式资源加载器
    'style-resources-loader': {
      // 解析的less
      preProcessor: 'less',
      // patterns  模式的意思  自动导入的地址
      patterns: [path.resolve(__dirname, './src/assets/var.less')]
    }
  }
}
